<!DOCTYPE html>
<html lang="en">
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="/js/rem.js" type="text/javascript"></script>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="telephone=no" name="format-detection">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>活动首页</title>
    <link rel="stylesheet" href="/css/common.css" type="text/css">
    <link rel="stylesheet" href="/css/sign-up.css" type="text/css">
    <link rel="stylesheet" href="/css/activity_index.css" type="text/css">
</head>
<body>
<div id="act_list_main"  class="active">
    <ul class="content_activity">


    </ul>
    <div class="hide">

    </div>
</div>
<input type="hidden" id="admin" th:value="${admin}"/>
<!--<img src="[activity_img]">-->
<!-- 活动列表单项 -->
<script type="text/html" id="tpl_activity_item">
    <li class="content_activity_item">
        <div class="content_activity_top">
            <img src="[activity_img]">
        </div>
        <div class="content_activity_content">
            <p>[activity_name]</p>
            <p><img src="/img/yonghu.png"/> [authernumber]人投票，已投[votes_number]票[activity_state]</p>
            <div class="activity_stage_info">
            </div>

        </div>
        <input type="hidden" value="[activity_id]" class="act_id">
        <input type="hidden" value="[is_in]" class="is_in">
    </li>
</script>
<script type="text/html" id="tpl_activity_items">
    <li class="content_activity_item">
        <div class="content_activity_top">
            <img src="[activity_img]">
        </div>
        <div class="content_activity_content">
            <p>[activity_name]</p>
            <p ><img src=""/>[activity_state]</p><!--   //隐藏  -->
            <div class="activity_stage_info">
            </div>

        </div>
        <input type="hidden" value="[activity_id]" class="act_id">
        <input type="hidden" value="[is_in]" class="is_in">
    </li>
</script>
<script type="text/html" id="tpl_activity_stage_item">
    <p class="match">[stage_name]：[stage_start_time] -- [stage_end_time]</p>
</script>

<script type="text/javascript" src="/js/zepto.js"></script>
<script type="text/javascript" src="/js/touch.js"></script>
<script type="text/javascript" src="/js/util.js"></script>

<script >
    window.tplReg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。

    window.IsArray = function (v) {
        return Object.prototype.toString.call(v) == '[object Array]';
    }
    window.IsObject = function (v) {
        return Object.prototype.toString.call(v) == '[object Object]';
    }

    window.getLowerCaseKeyJsonByRecursive = function (obj) {
        var ret = {}//转成对象 进行属性名小写化
        if (window.IsArray(obj)) {
            //console.log("array");
            ret = [];
            for (var i = 0; i < obj.length; i++) {
                //此方法一定可以完成 这个功能 传入一个大写KEY 导出一个小写KEY
                var tmp_obj = window.getLowerCaseKeyJsonByRecursive(obj[i])
                ret.push(tmp_obj);
            }
            return ret;
        } else if (window.IsObject(obj)) {
            //console.log("object");

            ret = {};
            for (var key in obj) {
                //普通字符串
                ret[key.toLowerCase()] = window.getLowerCaseKeyJsonByRecursive(obj[key]);
            }
            return ret;
        } else {

            return obj;

        }
    }
    //活动界面的上拉加载更多
    $("#act_list_main").off("scroll").on("scroll", function () {

        //获取当前浏览器的滚动条高度
        //scrollHeight真实高度
        if (this.scrollHeight <= (this.scrollTop + $(this).height())) { //判断当前浏览器滚动条高度是否已到达浏览器底部，如果到达底部加载下一页数据信息
            // $("#loadingImg").css('visibility','visible');
            //加载更多
            $(this).children().last().removeClass("hasnomore").addClass("loading");
            getLastestFiveActivity();
        }
    });

    var loadMoreActivity = false;
    //获取最近的五个作品
    function getLastestFiveActivity() {
        if (loadMoreActivity) {
            return;
        }
        loadMoreActivity = true;
        //第一次请求 以及上拉加载时都要调用该方法
        var count = $("#act_list_main").find("ul>li.content_activity_item").length;
        //已经加载的活动的数量
        var admin = $("#admin").val();
        $.ajax({
            method: 'get',
            url: "/front/getActivities"//TODO:请求获取 活动列表的地址
            , async: false
            , data: {
                start: count + 1,//从多少开始
                count: 5,         //请求多少个
                admin: admin
            }
            , dataType: "json"
            , dataFilter: function (data, type) {
                var retobj = window.getLowerCaseKeyJsonByRecursive(JSON.parse(data))
                var ret = JSON.stringify(retobj);
                return ret;
            }
            , success: function (res) {
                //console.log("success:",res);
                if (res.code == 0) {
                    alert("服务器返回了的错误的信息！")
                    return;
                }
                if (res.data.length > 0) {
                   // console.log("success》if 开始");
                    //TODO：实例化到页面上
                    for (var i = 0; i < res.data.length; i++) {

                        if(res.data[i].is_rote == 0){//设置投票
                            var one = res.data[i];
                            var item = $($("#tpl_activity_item").html().replace(tplReg,
                                function (node, key) {
                                    if (key == "activity_state") {
                                        return one[key] == "0" ? "<span class='nostart'>未开始</span>" : one[key] == "1" ? "<span class='ing'>进行中</span>" : "<span class='end'>已结束</span>";
                                    }
                                    return one[key];
                                }
                            ));
                            var stage_time_obj = {};
                            stage_time_obj = {
                                stage_name: "时间",
                                stage_start_time: one.activity_starttime.split(' ')[0],
                                stage_end_time: one.activity_endtime.split(' ')[0]
                            };
                            item.find(".activity_stage_info").append($("#tpl_activity_stage_item").html().replace(tplReg, function (node, key) {
                                return stage_time_obj[key];
                            }))
                            // }
                            $("#act_list_main").find("ul").append(item);
                        }else{
                            var one = res.data[i];
                            var item = $($("#tpl_activity_items").html().replace(tplReg,
                                function (node, key) {
                                    if (key == "activity_state") {
                                        return one[key] == "0" ? "<span class='nostart'>未开始</span>" : one[key] == "1" ? "<span class='ing'>进行中</span>" : "<span class='end'>已结束</span>";
                                    }
                                    return one[key];
                                }
                            ));
                            var stage_time_obj = {};
                            stage_time_obj = {
                                stage_name: "时间",
                                stage_start_time: one.activity_starttime.split(' ')[0],
                                stage_end_time: one.activity_endtime.split(' ')[0]
                            };
                            item.find(".activity_stage_info").append($("#tpl_activity_stage_item").html().replace(tplReg, function (node, key) {
                                return stage_time_obj[key];
                            }))
                            // }
                            $("#act_list_main").find("ul").append(item);
                        }
                    }
                    $("#act_list_main").children().last().removeClass("hasnomore").removeClass("loading");
                } else {
                    //TODO:提示没有 更多
                    $("#act_list_main").children().last().removeClass("loading").addClass("hasnomore");
                }
            },
            error: function (res, b) {
                alert("正在加载···")
            },
            complete: function (res) {
                loadMoreActivity = false;
            }
        })

    }
    //给每个活动添加点击事件 并切换到该活动的界面下面
    $("#act_list_main").on("tap", "ul>li.content_activity_item", function () {
        window.showLoading();
        window.localStorage.setItem("last_index",1);
        var that=this;
        var admin = $("#admin").val();
        if(admin == null){
            admin = "feiyuebook";
        }
        setTimeout(function () {
            //找到

            var id = $(that).find("input").val();
            var ins = $(that).find("input").next().val();
            //console.log($(this).find("input").val())
            if(ins==0) {
                window.location.replace("/front/activity?activity_id="+id+"&admin="+admin);
            } else {
                alert("该活动评审已结束！");
                window.closeLoading();
            }
        },20);
    })
    getLastestFiveActivity();
</script>
</body>
</html>